let Vue = null
class VueRouter{
    constructor(options){
       this.options = options
       // this.current = window.location.hash.slice(1) || '/' // 这么写hash变化不能动态切换页面
       Vue.util.defineReactive(this, 'current', window.location.hash.slice(1) || '/') // 把current弄成相应式，这样hash变化就能动态切换页面了
       window.addEventListener('hashchange',()=>{
           this.current = window.location.hash.slice(1) || '/'
       })
    }
}

VueRouter.install = function(_Vue){
   Vue = _Vue

   Vue.mixin({
       beforeCreate(){
           if(this.$options.router){
              Vue.prototype.$router = this.$options.router
           }
       }
   })

   Vue.component('router-link',{
       props:{
         to:{
            type:String,
            require:true
         }
       },
       render(h){
           return h('a',{ 
               attrs :
                {
                   href:'#' + this.to
                }
            },this.$slots.default)
       }
   })

   Vue.component('router-view',{
    render(h){
        const {current,options:{routes}} = this.$router
        let comp = null
        const route = routes.find(item => item.path === current)
        if(route){
            comp = route.component
        }
        return h(comp)
    }
})
}

export default VueRouter